<template>
	<view>
		<canvas id="canvas" :canvas-id="canvasId"></canvas>
	</view>
</template>

<script>
	export default {
		name: "my-canvas",
		data() {
			return {
				myReq: ''
			}
		},
		props: {
			canvasId: String,
			stopAnimation: { // 停止动画效果
				type: Boolean,
				default: false
			},
			waveWidth: { // 波浪宽度，数越小越宽
				type: Number,
				// default: 0.012
				default: 0.01
			},
			waveHeight: { // 波浪高度，数越大越高
				type: Number,
				// default: 12
				default: 20
			},
			speed: { // 波浪移动速度
				type: Number,
				// default: 0.02
				default: 0.03
			},
			xOffset: { // 控制波浪水平移动 
				type: Number,
				// default: 0.02
				default: 0
			}
		},
		// watch: {
		// 	stopAnimation(newValue, oldValue) {
		// 		if (newValue) {
		// 			window.cancelAnimationFrame(this.myReq)
		// 		}
		// 	}
		// },
		mounted() {
			let that = this
			// 获取画布的容器宽高 
			let w, h
			const query = uni.createSelectorQuery().in(this);
			query.select('#canvas').boundingClientRect(data => {
				// console.log(data); 
				w = data.width
				h = data.height
			}).exec()
			const ctx = uni.createCanvasContext(this.canvasId, this)
			// 初始化基础数据 
			const canvasWidth = w // 容器宽度 
			const canvasHeight = h // 容器高度 
			const startX = 0 // 画布x轴起始位置 
			const startY = 0 // 画布y轴起始位置 
			let points = [] // 二维数组，形成波浪的点坐标集合 
			const waveWidth = this.waveWidth // 波浪宽度，数越小越宽 
			const waveHeight = this.waveHeight // 波浪高度，数越大越高 
			let xOffset = this.xOffset // 控制波浪水平移动 
			const yOffset = 1.65 // 控制水位高度，数越大越高 
			const speed = this.speed // 波浪移动速度 
			const colors = ['#ffffff', '#C1E6CA', '#8AD19B'] // 波浪颜色 
			// 渐变色 
			function getChartColor() {
				let w2 = canvasWidth / 2;
				let h2 = canvasHeight / 2;
				let grd = ctx.createLinearGradient(w2, canvasHeight, w2, h2, w2, 0)
				grd.addColorStop(0, colors[0])
				grd.addColorStop(0.5, colors[1])
				grd.addColorStop(1, colors[2])
				return grd
			}
			// 绘制静态波浪 
			function drawCon() {
				ctx.beginPath()
				for (let i = 0; i < points.length; i += 1) {
					let point = points[i]
					ctx.lineTo(point[0], point[1])
				}
				ctx.lineTo(canvasWidth, canvasHeight) // 右边框 
				ctx.lineTo(startX, canvasHeight) // 下边框 
				ctx.lineTo(points[0][0], points[0][1]) // 左边框 
				ctx.setStrokeStyle('#12A234') // 上边框 
				ctx.setLineWidth(3)
				ctx.stroke() // 真正的画线 

				ctx.fillStyle = getChartColor(); // 填充渐变色 
				ctx.fill()
				// 绘制到页面上 
				ctx.draw()
			}
			// 生成波浪的点坐标 
			function update() {
				points = []
				for (let x = startX; x < startX + canvasWidth; x += 20 / canvasWidth) {
					const y = waveHeight * Math.sin(waveWidth * x + xOffset)
					points.push([x, (canvasHeight / yOffset) + y]) // 生成波浪的点坐标 
				}
				xOffset += speed
			}
			// 创建画布 
			function draw() {
				ctx.clearRect(startX, startY, canvasWidth, canvasHeight)
				// 生成波浪的点坐标 
				update()
				// 绘制静态波浪
				drawCon()
				if (!that.stopAnimation) {
					// console.log('proceed');
					that.myReq = window.requestAnimationFrame(draw)
					// console.log(that.myReq);
				}
			}
			window.requestAnimationFrame(draw)
		},
	}
</script>

<style lang="scss" scoped>
	#canvas {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
	}
</style>
